style tweaks

5 files changed, 99 insertions, 69 deletions

diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 4edfaa38..328f5bbe 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -10,59 +10,78 @@
 	let followed = false;
 </script>
 
-<div class="container px-4 flex flex-wrap sm:flex-nowrap mb-4">
-	<div class="w-full sm:w-[340px] pt-20 space-y-5 mr-4">
-		<h1 class="text-3xl font-bold text-center sm:text-left">{subject.username}</h1>
+<div class="container mx-auto w-full x-4 mb-4 flex flex-wrap">
+	<div class="w-[240px] pt-20 space-y-5 lg:absolute left-20 mx-auto">
+		<h1 class="text-3xl font-bold text-center mx-auto lg:text-left">{subject.username}</h1>
 
-		<div class="text-secondary w-64">
+		<div class="text-secondary mx-auto text-center lg:text-left lg:mx-0">
 			{subject.address && subject.address !== 'null' ? subject.address : ''}
 		</div>
 
 		{#if user?.username !== subject.username}
-			<div>
-				<a href={`/${subject.username}/receive`}>
-					<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2">
-						Pay now
-					</button>
-				</a>
+			<div class="flex flex-wrap gap-2 w-full">
+				<div class="w-full flex">
+					<a href={`/${subject.username}/receive`} class="mx-auto">
+						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
+							<div class="mx-auto flex">
+								<div style="mr-1">⚡️</div>
+								<div>Lightning</div>
+							</div>
+						</button>
+					</a>
+				</div>
 
-				{#if user}
-					<a href={`/${subject.username}/request`}>
-						<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
-							>Ask to pay</button
-						>
+				<div class="w-full flex">
+					<a href={`/${subject.username}/address`} class="mx-auto">
+						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
+							<div class="mx-auto flex">
+								<img src="/images/bitcoin.svg" class="w-5 my-auto mr-1" />
+								<div>Bitcoin</div>
+							</div>
+						</button>
 					</a>
-				{/if}
+				</div>
 
-				<a href={`/${subject.username}/address`}>
-					<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2">
-						Bitcoin address
-					</button>
-				</a>
+				{#if user}
+					<div class="w-full flex">
+						<a href={`/${subject.username}/request`} class="mx-auto">
+							<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
+								<div class="mx-auto flex">
+									<Icon icon="support" style="mr-1" />
+									<div>Invoice</div>
+								</div>
+							</button>
+						</a>
+					</div>
+				{/if}
 			</div>
 		{/if}
 	</div>
 
-	<div class="space-y-5 mt-5 sm:mt-20 mx-auto max-w-lg">
-		<img {src} class="w-[300px] mx-auto" on:click={() => copy(text)} alt="Lightning address" />
+	<div class="w-full flex">
+		<div class="space-y-5 mt-5 lg:pt-20 mx-auto max-w-lg">
+			<div class="border-2 rounded-[20%] w-[380px] py-6 mx-auto">
+				<img {src} class="mx-auto" on:click={() => copy(text)} alt="Lightning address" />
+			</div>
 
-		<div class="bg-primary font-semibold rounded-xl text-sm p-3 flex">
-			<div class="my-auto font-semibold text-lg w-full text-center">{text}</div>
-			<button class="ml-auto hover:opacity-80" on:click={() => copy(text)}>
-				<Icon icon="copy" />
-			</button>
-		</div>
+			<div class="bg-primary font-semibold rounded-3xl text-sm p-3 flex">
+				<div class="my-auto font-semibold text-lg w-full text-center">{text}</div>
+				<button class="ml-auto hover:opacity-80" on:click={() => copy(text)}>
+					<Icon icon="copy" />
+				</button>
+			</div>
 
-		{#if user?.username === subject.username}
-			<p class="text-secondary mb-1">
-				This <a
-					href="https://lightningaddress.com"
-					class="underline"
-					target="_blank"
-					rel="noreferrer">lightning address</a
-				> is like an email for bitcoin. You can publish it on your website or business cards and use
-				it multiple times.
-			</p>
-		{/if}
+			{#if user?.username === subject.username}
+				<p class="text-secondary mb-1">
+					This <a
+						href="https://lightningaddress.com"
+						class="underline"
+						target="_blank"
+						rel="noreferrer">lightning address</a
+					> is like an email for bitcoin. You can publish it on your website or business cards and use
+					it multiple times.
+				</p>
+			{/if}
+		</div>
 	</div>
 </div>
diff --git a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
index 41958cd0..76e5e124 100644
--- a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
@@ -68,12 +68,10 @@
 			<Numpad bind:amount bind:currency />
 			<button
 				type="submit"
-				class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold {!amount
-					? 'opacity-50'
-					: 'opacity-100 hover:opacity-80'}"
-				disabled={!amount}
+				class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold
+				opacity-100 hover:opacity-80"
 			>
-				Next
+				{amount ? 'Next' : "Sender's choice"}
 			</button>
 		</div>
 	</form>
diff --git a/src/routes/(app)/[username]/request/+page.svelte b/src/routes/(app)/[username]/request/+page.svelte
index 6e7eb08a..6422b794 100644
--- a/src/routes/(app)/[username]/request/+page.svelte
+++ b/src/routes/(app)/[username]/request/+page.svelte
@@ -9,11 +9,11 @@
 	let { subject, user } = data;
 </script>
 
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
+<button class="ml-5 md:ml-20 mt-10 hover:opacity-80" on:click={back}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<div class="container max-w-lg px-4 mx-auto">
+<div class="container max-w-lg px-4 mx-auto mt-10 space-y-5">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Request an invoice</h1>
 
 	<form method="POST" use:enhance class="space-y-5">
@@ -22,7 +22,7 @@
 
 		<textarea
 			name="memo"
-			placeholder="You can use this field to describe your order"
+			placeholder="Use this field to describe your order"
 			class="w-full p-4 border rounded-xl h-48"
 		/>
 
@@ -31,7 +31,7 @@
 				type="submit"
 				class="bg-black text-white border rounded-full px-6 py-2 font-bold mx-auto"
 			>
-				Submit Request
+				Submit
 			</button>
 		</div>
 	</form>
diff --git a/src/routes/(app)/[username]/request/sent/+page.svelte b/src/routes/(app)/[username]/request/sent/+page.svelte
index 1ee2cde1..4995bfb2 100644
--- a/src/routes/(app)/[username]/request/sent/+page.svelte
+++ b/src/routes/(app)/[username]/request/sent/+page.svelte
@@ -11,10 +11,8 @@
 		<Icon icon="check" style="mx-auto" />
 	</div>
 	<h1 class="text-3xl md:text-4xl font-bold mb-6">Request sent</h1>
-
-	<a href={`/${subject.username}`}>
-		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
-			Done
-		</button>
-	</a>
 </div>
+
+<a href={`/${subject.username}`}>
+	<div class="opacity-0 w-screen h-screen fixed top-24 left-0 z-50" />
+</a>
diff --git a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
index c7007af4..5d8377d4 100644
--- a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
@@ -71,9 +71,13 @@
 		{$t('user.transactions.header')}
 	</h1>
 
-	<div class="container w-full mx-auto md:text-lg px-4 max-w-xl">
-		<div class="flex text-md text-secondary flex-wrap mb-4">
-			<select class="md:hidden bg-white border p-4 rounded-full" on:change={change}>
+	<div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
+		<div class="flex text-md text-secondary flex-wrap relative">
+			<Icon icon="clock" style="absolute left-4 top-4 opacity-50 md:hidden" />
+			<select
+				class="md:hidden bg-white border rounded-full text-center w-36 h-14"
+				on:change={change}
+			>
 				{#each presets as { start, end, title }, i}
 					<option
 						selected={selection === i}
@@ -87,14 +91,17 @@
 						class:active={selection === i}
 						href={`/${user.username}/transactions/${getUnixTime(start) + '/'}1`}
 					>
-						<button class="rounded-full border py-2 px-5 hover:opacity-80 mb-2">
+						<button class="rounded-full border px-4 hover:opacity-80 h-14 w-20">
 							<div class="my-auto">{title}</div>
 						</button>
 					</a>
 				{/each}
 			</div>
-			<button class="ml-auto rounded-xl border py-2 px-5 hover:opacity-80 mb-2 flex" on:click={csv}>
-				<Icon icon="save" style="opacity-50 mr-2" />
+			<button
+				class="ml-auto rounded-full border px-4 w-36 hover:opacity-80 flex h-14"
+				on:click={csv}
+			>
+				<Icon icon="save" style="opacity-50 mr-2 my-auto" />
 				<div class="my-auto">Export</div>
 			</button>
 		</div>
@@ -111,10 +118,10 @@
 			{/if}
 		</div>
 
-		<div class="space-y-10">
+		<div class="text-base">
 			{#each $txns as tx}
-				<div class="grid grid-cols-3 border-b pb-5">
-					<div class="whitespace-nowrap">
+				<div class="grid grid-cols-3 border-b h-24">
+					<div class="whitespace-nowrap my-auto">
 						<div class="mb-1 font-bold">
 							{f(tx.amount * (tx.rate / sats), tx.currency)}
 
@@ -136,24 +143,32 @@
 						</span>
 					</div>
 
-					<div class="flex">
+					<div class="flex my-auto">
 						{#if tx.with}
 							<a href={`/${tx.with.username}`} class="mx-auto">
 								<div class="flex">
 									<div class="my-auto">
-										<Avatar user={tx.with} size={12} />
+										<Avatar user={tx.with} size={20} />
 									</div>
 									<div class="my-auto ml-1 text-secondary">{tx.with.username}</div>
 								</div>
 							</a>
 						{:else}
-							<div class="mx-auto text-secondary">
-								{tx.amount > 0 ? (tx.confirmed ? 'Received' : 'Pending') : 'Sent'}
+							<div class="mx-auto text-secondary flex">
+								{#if tx.network === 'lightning'}
+									<div class="text-6xl">⚡️</div>
+								{:else}
+									<img src="/images/bitcoin.svg" class="w-16 my-auto mr-2" />
+								{/if}
+
+								<div class="my-auto">
+									{tx.amount > 0 ? (tx.confirmed ? 'Received' : 'Pending') : 'Sent'}
+								</div>
 							</div>
 						{/if}
 					</div>
 
-					<div class="text-secondary text-right">
+					<div class="text-secondary text-right text-sm my-auto">
 						<div>
 							{format(parseISO(tx.createdAt), 'h:mm aaa')}
 						</div>